import { onMounted, ref, computed, onUnmounted } from "vue";
import { ElMessage } from "element-plus";
import { useCounterStore } from "@/stores/counter";
import { storeToRefs } from "pinia";
import { useRoute } from "vue-router";
export function useControl() {
  const pinia = useCounterStore();
  const { images } = storeToRefs(pinia);

  const route = useRoute();
  onMounted(() => {
    window.addEventListener("keydown", handleKeyDown);
  });
  onUnmounted(() => {
    window.removeEventListener("keydown", handleKeyDown);
  });
  // 计算是否可以移动左/右
  const canMoveLeft = computed(() => selectedIndex.value > 0);
  const canMoveRight = computed(
    () => selectedIndex.value < images.value.length - 1
  );
  //当前选中的图片索引
  const selectedIndex = ref(0);
  //当前选中的图片数据
  const item = ref({});
  //选中的图片id列表
  const selectIdList = ref([]);

  //键盘事件
  function handleKeyDown(event) {
    let number = [1, 2, 3, 4, 5];
    let color = ["Q", "W", "E", "R", "T", "q", "w", "e", "r", "t"];
    if (event.key == "a" || event.key == "A") {
      if (!canMoveLeft.value) {
        ElMessage({
          message: "第一页",
          type: "warning",
        });
        return;
      }
      event.preventDefault();
      moveSelection(-1);
    }
    if (event.key == "d" || event.key == "D") {
      if (!canMoveRight.value) {
        ElMessage({
          message: "最后一页",
          type: "warning",
        });
        return;
      }
      event.preventDefault();
      moveSelection(1);
    }
    // 检查是否按下了 Ctrl 键以及相应的数字键

    if (number.includes(parseInt(event.key))) {
      event.preventDefault();
      changeLevel(event.key);
    }
    if (color.includes(event.key)) {
      event.preventDefault();
      changeColor(event.key);
    }
  }

  //修改评级
  function changeLevel(val) {
    console.log("555", 555);

    if (route.name == "scroll") {
      selectIdList.value.forEach((item) => {
        images.value.forEach((i) => {
          if (i.id == item) {
            i.level = val;
          }
        });
      });
      return;
    }
    images.value.forEach((i) => {
      if (i.id == item.value.id) {
        i.level = val;
      }
    });
  }
  //修改标签颜色
  function changeColor(val) {
    let color = {
      q: "red",
      w: "yellow",
      e: "green",
      r: "blue",
      t: "purple",
      Q: "red",
      W: "yellow",
      E: "green",
      R: "blue",
      T: "purple",
    };
    if (route.name == "scroll") {
      console.log("555", 555);
      selectIdList.value.forEach((item) => {
        images.value.forEach((i) => {
          if (i.id == item) {
            i.borderColor = color[val];
          }
        });
      });
      return;
    }

    images.value.forEach((i) => {
      if (i.id == item.value.id) {
        i.borderColor = color[val];
      }
    });
  }
  // 移动选择
  function moveSelection(direction) {
    selectedIndex.value += direction;
    item.value = JSON.parse(JSON.stringify(images.value[selectedIndex.value]));
    item.value.displaySize = {
      width: 1000,
      height: 430,
    };
  }
  //选中
  const select = (items, index) => {
    console.log("items", items);
    item.value = JSON.parse(JSON.stringify(items));
    item.value.displaySize = {
      width: 1000,
      height: 430,
    };
    selectedIndex.value = index;
  };
  //标签颜色筛选

  return {
    images,
    selectedIndex,
    item,
    changeColor,
    handleKeyDown,
    changeLevel,
    moveSelection,
    canMoveLeft,
    canMoveRight,
    select,
    selectIdList,
  };
}
